// import React from 'react';
import Taro, {getCurrentInstance} from "@tarojs/taro";
import {connect} from 'react-redux';
import {View, Text, Button, Image as Img} from '@tarojs/components';
import {Swiper, SwiperItem, Price, Image} from '@nutui/nutui-react-taro';
import {AtButton, AtIcon} from 'taro-ui';
import products from "./productList.json";
import './index.less';

function Product(){
  const params = getCurrentInstance()?.router?.params || {};
  const productList = products.rows;
  console.log('params', params);
  const currentProduct = productList.find((l) => l.id === params.productId) || {};
  return (
    <View className='currentProductWrap'>
      <Swiper
        height={390}
        className='swiperWrap'
        // className='test-h'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        // vertical
        circular
        indicatorDots
        autoplay
      >
        <SwiperItem>
          {/*<Image mode='aspectFill' src='http://www.nyjinguan.com/public/upload/images/20230815/1692085822.png' />*/}
          <Image mode={currentProduct.id !== '6' ? 'aspectFill' : 'aspectFit'} src={currentProduct?.imgSrc} />
        </SwiperItem>
        <SwiperItem>
          {/*<Image mode='aspectFill' src='http://www.nyjinguan.com/public/upload/images/20230815/1692085822.png' />*/}
            <Image mode={currentProduct.id !== '6' ? 'aspectFill' : 'aspectFit'} src={currentProduct?.imgSrc} />
        </SwiperItem>
      </Swiper>
      <View className='priceLine'>
        <View>
          {/*<Text>售价 </Text><Price price='3000' size='small' thousands />*/}
          <Text>售价: <Text style={{color: '#fa2c19'}}>该渠道联系客服,售价最美丽,绝对底价!!</Text></Text>
        </View>
        <View>
          <Button className='shareBtn' openType='share' plain size='mini'>
            <AtIcon prefixClass='icon' value='fenxiang' color='#666666' size='18' />分享
          </Button>
        </View>
      </View>
      <View className='nameLine'>
        <View>
            {currentProduct.name}
        </View>
      </View>
      <View className='jieshao'>
        <View className='title'>图文详情</View>
        <Img
          preview
          mode='aspectFit'
          src={currentProduct.parameterSrc}
          originalSrc={currentProduct.parameterSrc}
        />
      </View>
      <View className='pageFooter'>
        <AtButton
          onClick={() => {
            Taro.makePhoneCall({
              phoneNumber: '17637717700',
              success: (res) => console.log('成功', res),
              fail: (res) => console.log('失败', res),
              complete: (res) => console.log('any', res)
            });
          }}
        ><AtIcon prefixClass='icon' value='kefu' size='18' color='#ffffff' /> 请咨询客服询底价</AtButton>
      </View>
    </View>
  )
}

// eslint-disable-next-line no-shadow
export default connect(({products}) => {return {...products}})(Product)
